require(['./config'], () => {
  require(['template', 'request', 'jquery', 'header', 'footer', 'nav', 'bootstrap', 'popper'], (template, req) => {
    class ProductDetail {
      constructor() {
        this.load()
        this.getSmall()
        this.getBig()
        this.getPrice()
        this.isCart()
        this.addCart()
        this.productCount()
        this.suhover()
        this.cartNum()
        this.login()
        this.outClick()
        this.searchName()
      }
      load() {
      }
      getSmall() {
        req.getsProductData()
          .then(res => {
            // console.log(res[0].id)

            //根据id渲染页面 取出相应的数据
            // console.log(res);
            const b = window.location.href.split('=')[1];
            let c = []
            const a = res.map(item => {
              if (b === item.id) {
                c.push(item)
                return item
              }
            })
            //怎样获取这个imageStrList？
            const html = template('smallImage', {
              smallImg: c[0].imageStrList
            })
            $('#ps_img_list').html(html);
          })

      }
      getBig() {
        req.getsProductData()
          .then(res => {
            // console.log(res[0].id)
            // //根据id渲染页面 取出相应的数据
            // console.log(res);
            const b = window.location.href.split('=')[1];
            let c = []
            const a = res.map(item => {
              if (b === item.id) {
                c.push(item)
                return item
              }
            })
            const html = template('bigImage', {
              bigImg: c[0].imageList.split(',')
            })
            $('#ps_b_B').html(html);
          })
      }
      getPrice() {
        req.getsProductData()
          .then(res => {
            const b = window.location.href.split('=')[1];
            let c = []
            const a = res.map(item => {
              if (b === item.id) {
                c.push(item)
                return item
              }
            })
            // console.log(c[0]);
            const html = template('ps_R_P', {
              priceL: c[0]
            })
            // console.log(html)
            $('#psRR').html(html);
            $('.bLis').eq(0).addClass('BLis').siblings().removeClass('BLis')
            $('.iiImg').eq(0).addClass('lisImg').siblings().removeClass('lisImg')
            this.btnContent()
          })
      }
      // 判断是否加入购物车
      isCart() {
        //1.获取商品的id
        const loginT = document.cookie
        const a = loginT.split('=')[1]
        const userC = JSON.parse(localStorage.getItem('usernameList'))
        let userCart = ''
        const b = window.location.href.split('=')[1];
        userC.filter(item => {
          if (item.username === a) {
            userCart = item
            return userCart
          }
        })
        let cartPro = ''
        userCart.cart.filter(item => {
          if (item.id === b) {
            cartPro = item
            return cartPro
          }
        })
        if (cartPro) {
          $('.ps_nonegou').css('display', 'block')
        } else {
          $('.ps_nonegou').css('display', 'none')
        }
      }
      //右边点击
      btnContent() {
        let a = 0
        $('.ps_B_right').on('click', function () {
          $('.iiImg').eq(a).addClass('lisImg').siblings().removeClass('lisImg')
          $('.bLis').eq(a).addClass('BLis').siblings().removeClass('BLis')
          a++
          console.log(a)
          if (a >= ($('.iiImg').length)) {
            a = 0
          }
        })

        $('.ps_B_left').on('click', function () {
          a--
          $('.iiImg').eq(a).addClass('lisImg').siblings().removeClass('lisImg')
          $('.bLis').eq(a).addClass('BLis').siblings().removeClass('BLis')
          if (a <= 0) {
            a = ($('.iiImg').length)
          }
        })
      }
      //加入购物车
      addCart() {
        $('.ps_btn_addcart').on('click', function () {
          console.log('点击按钮');
          //1.验证登录状态
          const loginT = document.cookie
          const a = loginT.split('=')[1]
          if (a) {
            //2.需要拿到当前商品的 id img price name englishname
            //3.加入到 当前用户的cart对象里面
            req.getsProductData()
              .then(res => {
                //根据id渲染页面 取出相应的数据
                //b 是 id 号
                const b = window.location.href.split('=')[1];
                // console.log(b);
                let c = []
                res.map(item => {
                  if (item.id === b) {
                    c.push(item)
                    return c
                  }
                })
                const arr = c[0]
                let d = {}
                let count = $('.ps_num_input').val()
                let {
                  id,
                  name,
                  englishName,
                  price,
                  imageStrList
                } = arr
                let img = imageStrList[0]
                //得到的是将要加进去的数组
                d = {
                  id,
                  name,
                  englishName,
                  price,
                  img,
                  count
                }
                //当前商品的信息
                console.log(d)
                //当前用户的列表
                const userC = JSON.parse(localStorage.getItem('usernameList'))
                //这个是当前用户的信息
                let userCart = ''
                //通过filter 方法拿到当前的用户信息
                userC.filter(item => {
                  if (item.username === a) {
                    userCart = item
                    return userCart
                  }
                })
                // console.log(userC)
                // console.log(userCart)
                // console.log(userCart.cart)
                //判断商品是否在购物车里面 如果在 就操作count 如果不在就 新加入
                let cartPro = ''
                // console.log(d)
                userCart.cart.filter(item => {
                  if (item.id === b) {
                    cartPro = item
                    return cartPro
                  }
                })
                // console.log(cartPro)
                //如果有这个cartPro
                console.log($('.ps_num_input').val())
                let allCount = parseInt($('.ps_num_input').val())
                if (cartPro) {
                  cartPro.count = (cartPro.count - 0) + allCount
                  localStorage.setItem('usernameList', JSON.stringify(userC))
                } else {
                  $('.ps_nonegou').css('display', 'block')
                  userCart.cart.push(d)
                  //4.先要判断 当前的用户id和loacl里面用户的名字是否相等 如果相等 先根据index进行删除然后 在加入
                  localStorage.setItem('usernameList', JSON.stringify(userC))
                }



              })
          } else {
            alert('请先登录')
            window.location.href = '/html/login.html'
          }

        })
      }
      //数量加减
      productCount() {
        const jian = $('.ps_num_jian'),
          jia = $('.ps_num_jia'),
          proVal = $('.ps_num_input')
        let a = parseInt(proVal.val())
        jian.on('click', function () {
          if (a <= 1) {
            a = 1
          } else {
            a--
          }
          $('.ps_num_input').val(a)
        })
        jia.on('click', function () {
          a++
          $('.ps_num_input').val(a)
        })
      }
      //小图片鼠标移入效果
      suhover() {
        $('.ps_S_up').on('mouseover', function () {
          console.log('123');
          //拿到ul对象 然后然让它动起来

        })
      }
      //首页购物车的数量判断
      cartNum() {
        let a = $('.tsc_eee').text()
        const loginT = document.cookie
        const b = loginT.split('=')[1]
        if (b) {
          const userC = JSON.parse(localStorage.getItem('usernameList'))
          //这个是当前用户的信息
          let userCart = ''
          //通过filter 方法拿到当前的用户信息
          userC.filter(item => {
            if (item.username === b) {
              userCart = item
              return userCart
            }
          })
          $('.tsc_eee').text(userCart.cart.length)
        } else {
          $('.tsc_eee').text('0')
        }
      }
      //监听用户登录
      login() {
        const a = document.cookie
        const user = a.split('=')[1]
        const loginBox = $('.tsb_login_box .tlb_to'),
          logOutBox = $('.tsb_login_box .tlb_new')
        if (user) {
          loginBox.css('display', 'none')
          logOutBox.css('display', 'block')
          $('.tlbn_username').text(user);
        } else {
          loginBox.css('display', 'block')
          logOutBox.css('display', 'none')
        }
      }
      //监听用户退出
      outClick() {
        $('.tlbno_out').on('click', function () {
          console.log('tuichu')
          //杀死cookie
          const cookie = document.cookie,
            username = cookie.split('=')[1]

          function setCookie(key, value, options = {
            expires: new Date(),
            path: '/'
          }) {
            document.cookie = `${key}=${encodeURIComponent(value)};expires=${options.expires};path=${options.path}`
          }
          setCookie('username', '', {
            expires: -1,
            path: '/'
          })
          const loginBox = $('.tsb_login_box .tlb_to'),
            logOutBox = $('.tsb_login_box .tlb_new')
          loginBox.css('display', 'block')
          logOutBox.css('display', 'none')
          const loname = $('.tsblb_username'),
            lopwd = $('.tsblb_password')
          loname.val('')
          lopwd.val('')
        })

      }
      searchName(){
        $('.tsb_search_btn').on('click',function(){
          let a = $('.tsb_seachbox_input').val()
          a = encodeURIComponent(a)
          window.location.href = `/html/search.html?name=${a}`
        })
      }
    }
    return new ProductDetail()
  })
})